<%@ include file="/WEB-INF/jsp/includes.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
  

    <style type="text/css">
        #loading{
        position:absolute;
        left:45%;
        top:40%;
        padding:2px;
        z-index:20001;
        height:auto;
        border:1px solid #ccc;
    }
    #loading a {
        color:#225588;
    }
    #loading .loading-indicator{
        background:white;
        color:#444;
        font:bold 13px tahoma,arial,helvetica;
        padding:10px;
        margin:0;
        height:auto;
    }
    #loading-msg {
        font: normal 10px arial,tahoma,sans-serif;
    }
    
    </style>
    <link rel="stylesheet" type="text/css" href="<c:url value="/styles/ext-all.css"/>" />
    <title>Find Owners</title>
    
	<meta http-equiv="pragma" content="no-cache"/>
	<meta http-equiv="cache-control" content="no-cache"/>
  </head>
  <body   style="overflow: hidden">
  <div id="account-grid" style=""></div>
  <div id="loading">
    <div class="loading-indicator"><img src="<c:url value="/images/default/shared/large-loading.gif"/>" width="32" height="32" style="margin-right:8px;float:left;vertical-align:top;"/>JPetstore Pimped - 1.0 <br /><span id="loading-msg">Loading styles and images...</span></div>
</div>
  
	<script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Loading Core API...';</script>
  	<script type="text/javascript" src="<c:url value="/script/ext/ext-base.js"/>" ></script>
	<script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Loading UI Components...';</script>
	<script type="text/javascript" src="<c:url value="/script/ext/ext-all-debug.js"/>" ></script>
	<script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Loading Grid Components...';</script>
	<script type="text/javascript" src="<c:url value="/script/ext/plugins/ExtendedGridPanel.js"/>" ></script>
	<script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Loading DWR Components...';</script>
    <script type="text/javascript" src="<c:url value="/dwr/interface/DwrClinic.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/dwr/engine.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/dwr/util.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/script/ext/DwrProxy.js"/>" ></script>
    <script type="text/javascript" src="<c:url value="/script/ext/ObjectReader.js"/>" ></script>
    <script type="text/javascript">
			Ext.BLANK_IMAGE_URL = '<c:out value="${pageContext.request.contextPath}"/>/images/default/s.gif';
	</script>
  
	<script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Initializing...';</script>
	<script type="text/javascript">
	

Ext.onReady(function() {



// create the record type

    var record = Ext.data.Record.create([
        { name: "id", type: "int", defaultValue: 0 },
        { name: "firstName", type: "string", defaultValue: "New Owner" },
        { name: "lastName", type: "string", defaultValue: "New Owner" },
        { name: "address", type: "string", defaultValue: "" },
        { name: "updated", type: "string", defaultValue: "" }
    ]);


    // create the Data Store
    
    var store = new Ext.data.Store({
    	proxy : new Ext.data.DWRProxy(DwrClinic.findOwners),
    	reader : new Ext.data.DwrDataReader({
    	id:'id'
    	},record) 
	});     
	
 	var menu = new Ext.menu.Menu({
 	
 	});
 	var saveRecords = function() {}; 
 	var insertRecord = function() {
        Ext.getCmp('grid').insertRecord(0);
        Ext.getCmp('grid').startEditing(0, 0);
    };

    var addRecord = function(dsgrid) {
        var rowIndex = Ext.getCmp('grid').addRecord({
            id: 0,
            lastName: 'New Owner',
            firstName: 'New Owner',
            address : '' 
        });
        Ext.getCmp('grid').startEditing(rowIndex, 0);
    };
    var removeRecord = function() {};
    
        var editCompleted = function(ed, value, startValue) {
        if (value == 'New Owner') {
            ed.record.reject();
            this.store.remove(ed.record);
            return false;
        }
    };
    
    var grid = new Ext.grid.GridPanel({
    	id:'grid',
        menu: menu,
        store: store,
        record: record,
        el:'account-grid',
        width:700,
        height:300,
         sm: new Ext.grid.RowSelectionModel(),
              columns: [
            {id:'id',header: "Id", width:10, sortable: false, dataIndex: 'id',hidden:true},
            {header: "Name", width: 130, sortable: true, dataIndex: 'firstName', editor: new Ext.form.TextField()},
            {header: "Last Name", width: 130, sortable: true, dataIndex: 'lastName',editor: new Ext.form.TextField()},
            {header: "Address", width: 290, sortable: true, dataIndex: 'address',editor: new Ext.form.TextField()}
        ],/*
    view: new Ext.grid.GroupingView({
        forceFit:true,
        // custom grouping text template to display the number of items per group
        groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
    }),*/
            listeners: {
            clearselect: function() { Ext.getCmp("example").disable(); },
            rowselect: function(row) { Ext.getCmp("example").enable(); },
        //    rowdblclick: function(grid, rowIndex, e) { alert("double click on row " + rowIndex); },
            commitfailed: function(record, action) { alert("failed to commit record " + record.id); },
            committed: function(record, action) { alert("record " + record.id + " has been committed"); },
            completed: editCompleted,
            commitdone: function(grid) { alert('no more to be committed'); }
        },
            tbar: [
            { text: "Clear", handler: function() { Ext.getCmp('grid').clearSelections(); }},
            { text: "Load", handler: function() {     grid.getStore().load({params:['']});
 }},
            { text: "Remove", handler: function() { grid.getStore().removeAll(); }},
            { text: "Save", handler: saveRecords},
            "-",
            { text: "Add User", handler: addRecord},
            { text: "Insert User", handler: insertRecord},
            { text: "Remove User", handler: removeRecord},
            "->",
            { text: "Example", disabled: true, id: "example" }
        ],
    
        stripeRows: true,
        loadMask: true,
        title:'Owners' 
    });
    
    grid.render();
//    grid.getStore().load({params:[]});
    grid.getStore().load({params:['']});
//    grid.getStore().load();
<%--


	new Ext.Viewport({
	    layout: 'border',
	    defaults: {
	        activeItem: 0
	    },
	    items: [{
	        region: 'north',
	        html: '<h1 class="x-panel-header">Petstore</h1>',
	        autoHeight: true,
	        border: false,
	        margins: '0 0 5 0'
	    },  {
	        region: 'center',
	        xtype: 'tabpanel',
	        items: {
	            title: 'Default Tab',
	            html: 'The first tab\'s content. Others may be added dynamically'
	        }
	    }, {
	        region: 'south',
	        title: 'Information',
	        collapsible: true,
	        html: 'Information goes here',
	        split: true,
	        height: 100,
	        minHeight: 100
	    }]
	});
--%>
	Ext.get('loading').hide(true);

});	

	</script>
  
  </body>
  </html>
  